<script setup lang="ts">
import {computed, inject, Ref, ref, nextTick} from 'vue'
import {AccessRecord, DreamVideo, Movie, VideoInfo} from '@/data/Dream'
import {getMovieIdObj, getMovieKey, getMovieTitle, gotoDreamVideo} from '@/utils/utils.ts'
import {ElMessage} from 'element-plus'
import {hotDB, movieDB} from '@/data/lowdb.ts'

const props = defineProps<{
    movieProps?: Movie
    video?: DreamVideo
}>()

const movie = inject<Ref<Movie>>('movie', ref())
if (!movie.value) {
    movie.value = props.movieProps
}

// 如果直接用 name=ref('') 只会执行一次，props.videoInfoObj 变化时不会自动更新 name 的值，测试名称修改时遇到的 bug
const name = computed<string>(() => {
    if (props.video) {
        return props.video.name
    } else {
        return getMovieTitle(movie.value)
    }
})

let records: Ref<Map<string, AccessRecord>>
if (props.video) {
    records = inject<Ref<Map<string, AccessRecord>>>('videoAccessRecords')
} else {
    records = inject<Ref<Map<string, AccessRecord>>>('movieAccessRecords')
}
const accessRecords = computed<AccessRecord>(() => {
    if (props.video) {
        return records.value.get(props.video.video)
    } else {
        return records.value.get(getMovieKey(movie.value))
    }
})

const nameInput = ref()
const nameEditable = ref(false)
const nameInputValue = ref('')

function videoNameEdit() {
    if (!props.video) return  // video 的名字才能修改

    nameEditable.value = true
    nameInputValue.value = name.value
    nextTick(() => {
        nameInput.value.focus()
    })
}

function saveName() {
    movieDB.find(getMovieIdObj(movie.value))
        .get('dreamVideos')
        .find({video: props.video.video})
        .set('name', nameInputValue.value)
        .write()
    props.video.name = nameInputValue.value
    nameEditable.value = false
    ElMessage.success('saved')
}

const videoInfo = computed<VideoInfo>(() => {
    let info: VideoInfo = {duration: 0, durationF: 'a', size: 0, sizeF: ''}
    const videoInfoObj = props.video ? props.video : movie.value
    return copyProperties(videoInfoObj, info)
})

function copyProperties(obj: Movie | DreamVideo, info: VideoInfo) {
    return <VideoInfo>Object.fromEntries(Object.entries(obj).filter(([key]) => info.hasOwnProperty(key)))
}

const isHot = ref(false)
const hots = inject<string[]>('hots', [])
if (hots.length > 0) {
    isHot.value = hots.includes(props.video.video)
}

function addToHot(e: Event) {
    if (!props.video) return

    if (hots.length === 0) {
        // hot 页面
        gotoDreamVideo(movie.value)
        e.stopPropagation()
        return
    }

    const videoFileName = props.video.video
    if (isHot.value) {
        hotDB.read().remove((video: string) => video === videoFileName)
            .write()
    } else {
        hotDB.read().push(videoFileName)
            .write()
    }
    isHot.value = !isHot.value
    e.stopPropagation()
}
</script>

<template>
  <div class="text-info-container">
    <div class="text" :class="isHot&&'hot'">
      <div v-if="nameEditable">
        <!--<a-textarea style="width: 260px;" auto-size v-model:value="video.name"/>-->
        <el-input style="width: 385px" ref="nameInput"
                  v-model="nameInputValue"
                  @keyup.enter="saveName"
                  @keyup.esc="nameEditable = false"
        />
      </div>
      <div v-else
           @dblclick="videoNameEdit"
           @contextmenu.prevent="addToHot($event)"
      >
        {{ name }}
      </div>
    </div>

    <div class="records" v-if="!nameEditable">
      <div>
        <span>{{ videoInfo.durationF }} {{ videoInfo.sizeF }}</span>
        <span v-if="accessRecords">{{ ' ' + accessRecords.accessCount }}</span>
      </div>
      <div v-if="accessRecords">{{ accessRecords.lastAccessTime }}</div>
    </div>
  </div>
</template>

<style scoped lang="stylus">
.text-info-container
    //background: #f4f4f4;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .text, .ant-input
        font-size: 16px;

    .hot
        color orange

    .records
        font-size: 11px;
        color: #a3a2a2;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
</style>